<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="添加证书"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y class="h-full">
				<view class="px-30">
					<view class="mb-30 bg-white rounded-lg">
						<FromList title="姓名">
							<uni-easyinput v-model="from.name" style="text-align: right" :input-border="false"
								placeholder="请输入姓名"></uni-easyinput>
						</FromList>
						<FromList title="日期">
							<view class="ml-30 w-full">
								<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" @click="handleChange"></uni-datetime-picker>
							</view>
						</FromList>
						<FromList title="证书照片" align="bottom">
							<view>
								<UpImageVue :src="from.url" imgKey="url" :image-styles="{width:'100%',height:200}" @get-url="setUrl">
									<view class="">
										<ImageBoxVue src="/static/icons/add.png" width="160rpx" height="160rpx"></ImageBoxVue>
									</view>
								</UpImageVue>
							</view>
						</FromList>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="p-30">
			<view @click="onSave" class="bg-[#329EFF] text-center text-white p-20 text-lg rounded-lg">提交</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		debounce
	} from '@/config/publicFun.js'
	import FromList from '@/components/FromList.vue';
	import UpImageVue from "@/components/UpImage.vue";
	import userApi from "../../apis/apiList/userApi";
	const imageStyles = {
		width: 64,
		height: 64,
	}
	const from = ref({
		name: "", // 证书名称
		url: "", // 证书图片地址
		stime: "", // 开始时间
		etime: "", // 结束时间
		des: "", //学历照片
	})
	const range = ref([])
	
	const maskClick = () => {}
	const setUrl = (key, url) => {
		from.value[key] = url
	}
	const handleChange = () => {
		if (range.value.length) {
			from.value.stime = range.value[0]
			from.value.etime = range.value[1]
		}
	}
	const onSave = debounce(() => {
		console.log(from.value);
		if (!from.value.name) {
			uni.showToast({
				icon: "none",
				title: '请输入证书名称！'
			})
			return
		}
		if (!from.value.url) {
			uni.showToast({
				icon: "none",
				title: '请上传证书照片！'
			})
			return
		}
		const params = {
			"anchor.id": uni.getStorageSync('anchor').id,
			stime: range.value[0],
			etime: range.value[1],
			...from.value
		}
		userApi.anchorquaAddInfo(params).then(res => {
			console.log(res);
			uni.showToast({
				icon: "none",
				title: '新增成功'
			})
			uni.navigateBack({
				delta: 1
			})
		})
	})
</script>

<style>
</style>